<template>
  <div style="padding: 0 15px;" @click="toggleClick">
    <span style="background-color: #F3F4F4;width: 20px;height: 20px">
          <svg     :class="{'is-active':!isActive}"
                   class="hamburger"
                   viewBox="0 0 16 16"
                   width="16"
                   height="16"  fill="none" xmlns="http://www.w3.org/2000/svg">
      <path fill-rule="evenodd" clip-rule="evenodd" d="M3.46329 8.5L6.40855 11.659C6.59686 11.861 6.58578 12.1774 6.3838 12.3657C6.18182 12.554 5.86543 12.5429 5.67712 12.341L2.26571 8.68193C1.90761 8.29783 1.90761 7.70217 2.26571 7.31808L5.67712 3.65904C5.86543 3.45706 6.18182 3.44598 6.3838 3.63429C6.58578 3.8226 6.59686 4.13899 6.40855 4.34096L3.46329 7.5L13.5008 7.5C13.777 7.5 14.0008 7.72386 14.0008 8C14.0008 8.27614 13.777 8.5 13.5008 8.5L3.46329 8.5Z" fill="#333333"/>
    </svg>
    </span>
  </div>
</template>

<script setup>
defineProps({
  isActive: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits()
const toggleClick = () => {
  emit('toggleClick');
}
</script>

<style scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>
